<template>
    <el-row :gutter="20">
      <el-col :span="8" v-for="CountDate in  CountDates" :key="CountDate.id" shadow="hover">
        <el-card :body-style="{padding:'0',display:'flex',alignItems:'center'}" shadow="hover" style="margin-bottom: 10px">
          <span :style="{background:CountDate.color}" class="icon_span" :class="'el-icon-'+CountDate.icon"></span>
          <div>
            <p class="h1_span">￥{{CountDate.value}}</p>
            <p class="h6_span">{{CountDate.name}}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
</template>

<script>

export default {
  name: "HomeDingDan",

  data() {
    return{
      CountDates:[
        {
          id: '1',
          color: '#67C23A',
          icon: 'circle-plus-outline',
          value: '213123',
          name: 'dsfg'
        },
        {
          id: '2',
          color: '#E6A23C',
          icon: 'circle-plus-outline',
          value: '342543',
          name: 'dfgh'
        },
        {
          id: '3',
          color: '#909399',
          icon: 'circle-plus-outline',
          value: '34645',
          name: 'erg'
        },
        {
          id: '4',
          color: '#67C23A',
          icon: 'circle-plus-outline',
          value: '23434',
          name: 'ay45y'
        },
        {
          id: '5',
          color: '#E6A23C',
          icon: 'circle-plus-outline',
          value: '3565',
          name: 'adf'
        },
        {
          id: '6',
          color: '#909399',
          icon: 'circle-plus-outline',
          value: '333',
          name: 'sdgfg'
        },
      ]
    }
  },

}
</script>

<style scoped>
.icon_span{
  display:inline-block;
  width: 30%;
  height: 8vh;
  line-height: 8vh;
  text-align: center;
}
.h1_span{
  font-size:25px;
  margin-left: 20px;
}
.h6_span{
  font-size:5px;
  margin-left: 22px;
  color: #B3C0D1;
}
</style>